<!--  -->
<template>
  <yy-page :linear-bg="true">
    <!-- #ifdef MP-WEIXIN || MP-ALIPAY-->
    <yy-navbar :border="false" title="会员卡明细" left-icon-color="#fff" title-color="#fff" :auto-back="true"></yy-navbar>
    <!-- #endif-->
    <view class="main">
      <view class="card">
        <view class="fc3 fs34 b">{{ card.cardName }}</view>
        <view class="fc8 fs24 mt30">No.{{ card.cardCode }}</view>
      </view>
      <view class="br20 mg20 bgfff over-hide">
        <view class="tabs">
          <u-tabs
            v-model="activeTab"
            :list="arr"
            :scrollable="false"
            @change="change"
            label-key="name"
            val-key="couponType"
            :active-style="{
              color: '#3BC5D2',
              fontWeight: 'bold'
            }"
            line-color="#3BC5D2"
          ></u-tabs>
        </view>
        <yy-list :list="listData" :loading="listLoading" :finished="listFinished" empty-type="recharge">
          <view v-for="(item, index) in listData" :key="index" class="item">
            <image class="icon" :src="item.typeImgUrl" />
            <view class="flex-1">
              <view class="fs28 b fc3">{{ item.typeName }}</view>
              <view class="fs24 fc8 mt20">{{ item.createTime }}</view>
            </view>
            <view class="fs32 b" :class="item.amount < 0 ? 'cut' : 'add'">{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}</view>
          </view>
        </yy-list>
      </view>
    </view>
  </yy-page>
</template>

<script>
  import listMixins from '@/mixins/listMixins'
  export default {
    mixins: [listMixins],
    // 数据
    data() {
      return {
        arr: [
          { name: '全部', couponType: '-1' },
          { name: '支出', couponType: '2' },
          { name: '充值', couponType: '1' }
        ],
        activeTab: '-1',
        card: {}
      }
    },

    // 加载完成
    onLoad(options) {
      const query = this.$utils.decode(options.query)
      this.card = query
      console.log('this.card', this.card, query)
      this.listLoad()
    },

    // 挂载方法
    methods: {
      onloadList() {
        const query = {
          ...this.pageInfo,
          ...{ type: this.activeTab, id: this.card.id }
        }
        return uni.$api.memberCard.getCardDetail(query).then((res) => {
          if (this.isLoading) {
            this.listData = []
          }
          this.listData = [...this.listData, ...res.list]
          return res
        })
      },
      change(item) {
        this.activeTab = item.couponType
        this.listRefresh()
      },
      tabClass(item) {
        if (this.activeTab === item) {
          return 'active tab'
        } else {
          return 'active-no tab'
        }
      }
    },
    // 计算属性
    computed: {}
  }
</script>
<style lang="scss" scoped>
  .main {
    height: 100vh;
  }
  .card {
    height: 180rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 30rpx;
    margin: 20rpx 20rpx 0 20rpx;
    border-radius: 20rpx;
    background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/card-item-bg.png) no-repeat;
    background-size: 100% 100%;
  }
  .tabs {
    width: 100%;
    height: 80rpx;
    background: #ffffff;
    margin-bottom: 20rpx;
  }
  .item {
    display: flex;
    align-items: center;
    margin: 0rpx 30rpx;
    padding: 30rpx 0rpx;
    box-sizing: border-box;
    border-top: 1rpx solid $dividing;
  }
  .add {
    color: #3bc5d2;
  }
  .cut {
    color: #ff8042;
  }
  .icon {
    margin-right: 27rpx;
    width: 58rpx;
    height: 58rpx;
  }
</style>
